<!-- 登录页 -->
<template>
  <div class="bigBox" style="max-width:750px; margin:0 auto;">
    <div class='logon'  style="max-width:750px;">鸿达玩具 <br> 收货系统 </div>
    <div class="back_mao" style="max-width:750px;">
      <ul class="back_mao_ul">
        <li class="ui_li_one">
        <div class=''>  <span class="user_box"></span> 账号</div>  <br>
       <input type="text" placeholder="请输入您的账号" v-model="user" class="inputTwo"> </li> 
       <div class=''> </div>
        <li style="max-width:550px;">
          <div class=''>  <span class="password_box"></span> 密码 </div> <br> 
          <input :type="passwordFalg? 'text' : 'password' " placeholder="请输入您的密码" v-model="password" class="inputTwo"><span @click="passwordFalgS" class="span_box"><van-icon name="eye-o" v-if="passwordFalg" /> <van-icon name="closed-eye" v-else /></span> </li>
          <li class="checked_box"><van-checkbox v-model="checked"></van-checkbox>&nbsp;&nbsp;记住密码</li>
        </ul>
     <center> <button  @click="logOn" class="login_button_box">立即登录</button></center>
    </div>
    <div class="fff_box"></div>
    <!-- <van-cell-group>
      <van-field v-model="user" label="账号" placeholder="请输入账号" />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="password" label="密码" placeholder="请输入密码" />
    </van-cell-group>
    <van-button type="primary" size="large" @click="logOn">登录</van-button> -->
  </div>
</template>

<script>
import { Notify } from "vant";
export default {
  name: "loingView",
  components: {
  
  },
  data() {
    return {
      /** 用户名 */
      user: "",
      /**密码 */
      password: "",
      /** 密码是否可见 */
      passwordFalg:false,
      /** 是否要记住密码 */
      checked: false,
     
    
    };
  },
  created() {
    // if (this.$router.history.current.query.code !== undefined){
    //   this.$api.postLoginCode(this.$router.history.current.query.code).then((res)=>{
    //      JSON.stringify(res);
    //       localStorage.setItem("ALB_H5_TOKEN", res.accessToken);
    //       localStorage.setItem("ALB_H5_USER", JSON.stringify(res));
    //       window.location.href = "/clockIn";
    //       Notify({ type: "success", message: "登录成功" });
    // }).catch((err)=>{
    //   Notify({ type: "danger", message: `${err.msg}`});
    // })
    // }
    // 本地有账号密码直接获取本地账号密码
     this.user =localStorage.getItem('ALB_H5_ACCOUNT') || ''
     this.password =localStorage.getItem('ALB_H5_PASSWORD') || ''
  },
  mounted() {},
  methods: {
    /**
     * 登录
     */
    logOn() {
      this.$api
        .postLogin({ account: this.user, password: this.password })
        .then((res) => {
          console.log(res)
          if (this.checked) {
            localStorage.setItem('ALB_H5_ACCOUNT',this.user)
            localStorage.setItem('ALB_H5_PASSWORD',this.password)
          }
          localStorage.setItem("ALB_H5_TOKEN", res.user_token);
          localStorage.setItem("ALB_H5_USER", JSON.stringify(res));
          window.location.href = "#/clockIn";
          Notify({ type: "success", message: "登录成功" });
        })
        .catch((err) => {
          console.log(err)
          Notify({ type: "danger", message:`${err.message}` });
        });
    },
    /** 密码是否可见 */
    passwordFalgS(){
      this.passwordFalg = !this.passwordFalg
    }
  },
};
</script>
<style scoped >
.checked_box{
  display: flex;
  align-items: center;
}
::v-deep .van-checkbox{
  display: inline-block;
}
.ui_li_one{
  margin-bottom: .25rem;
}
.user_box{
  background: url('https://s3.bmp.ovh/imgs/2023/02/28/c2352b3cbbe16ace.png') no-repeat;
  background-size: 100% 100% ;
  width: .125rem;
  height: .125rem;
  display: inline-block;
}
.password_box{
  background: url('https://s3.bmp.ovh/imgs/2023/02/28/ee14b3e233b03b76.png') no-repeat;
  background-size: 100% 100% ;
  width: .125rem;
  height: .125rem;
  display: inline-block;
}
.logon{
  font-size: .4rem;
  margin-top: .3rem;
  margin-left: .3rem;
  color: #fff;
}
.login_button_box{
  height: .4rem;
  width: 82%;
  border: none;
  border-radius: 30px;
  margin-top: 2.2rem;
  color: #fff;
  background: linear-gradient(#97f8cc, #71e9d2, #93eae8);
}
.bigBox {
  background: url("https://s3.bmp.ovh/imgs/2023/02/28/476b38bd31228250.png")
    no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.back_mao {
  width: 100%;
  height: 4.9rem;
  position: absolute;
  background: url('https://s3.bmp.ovh/imgs/2023/02/28/746d18611baf01a9.png');
  background-size: 100% 100%;
  left: 50%;
  top: 51%;
  transform: translate(-50%,-50%);
  font-size: .15rem;
  z-index: 2;
}
.back_mao_ul {
 margin-top: 1.2rem;
 margin-left: .7rem;
}
.back_mao_ul li {
 margin-top: .125rem;
}
.inputTwo{
  border: none;
  width: 2.4rem;
  border-bottom: 1px #71e9d2 solid;
  position: relative;
}
.span_box{
  position: absolute;
  left: 2.9rem;
}
.fff_box{
  width: 100%;
  position:  absolute;
  top: 30%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eefcf7;
  z-index: 1;
}
.alb_box {
  text-align: center;
  font-size: 0.1875rem;
  margin-bottom: 0.375rem;
}
</style>
